<!-- 通用侧边栏 -->
<script setup lang="ts">
import type { CustomItemType } from '@/types/NormalMenu/menu';
import type { ItemType } from 'ant-design-vue';
import { h, ref, watch } from 'vue';
import type { MenuItemType, SubMenuType } from 'ant-design-vue/es/menu/src/interface';
import { BookOutlined, BulbOutlined, HomeOutlined, PieChartOutlined, RocketOutlined, UserOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';

// 定义可选传入属性
const props = defineProps<{
  menus?: CustomItemType[]; // note: 加上?表示可选相当于声明一个类型
  title?: string; // 可选是否显示标题
}>();

// 使用useRouter和useRoute
const router = useRouter();
const route = useRoute();

const drawerVisible = ref(false);

function toggleDrawer() {
  drawerVisible.value = !drawerVisible.value;
}

const menuList = ref<CustomItemType[]>([
  {
    label: '首页',
    key: '1',
    url: '/user/homepagesquare',
    icon: HomeOutlined,
  },
  {
    label: '双创广场',
    key: '2',
    icon: RocketOutlined,
    children: [
      {
        label: '项目展示',
        key: '2-1',
        url: '/user/dachuang/project',
      },
      {
        label: '赛事信息',
        key: '2-2',
        url: '/user/dachuang/saishi',
      },
    ],
  },
  {
    label: '数据广场',
    key: '3',
    icon: PieChartOutlined,
    url: '/user/datasquare',
  },
  {
    label: '学习广场',
    key: '4',
    icon: BookOutlined,
    url: '/user/learning_home',
  },
  {
    label: '训练营列表',
    key: '5',
    url: '/personalSpace/trainingSet',
    icon: BulbOutlined,
  },
  {
    label: '个人中心',
    key: '6',
    url: '/personalSpace/personalInfo',
    icon: UserOutlined,
  },
]);

// 如果传入的menus不为空则覆盖默认的menuList
if (props.menus)
  menuList.value = props.menus;

// 监听menus的变化
watch(() => props.menus, (newMenus) => {
  if (newMenus)
    menuList.value = newMenus;
});

// 由于添加了新字段，因此需要生成符合ItemType的数据
const generateMenuList = (menus: CustomItemType[]): ItemType[] => {
  return menus.map((item: CustomItemType) => {
    if (item.children) {
      return {
        key: item.key,
        label: item.label,
        children: generateMenuList(item.children),
        icon: item.icon ? h(item.icon, { style: { fontSize: '1.3rem' } }) : undefined, // 使用图标
      } as SubMenuType;
    }
    return {
      key: item.key,
      label: item.label,
      icon: item.icon ? h(item.icon, { style: { fontSize: '1.3rem' } }) : undefined, // 使用图标
    } as MenuItemType;
  });
};

// 利用深度搜索根据keyId获取对应菜单项
const findMenuItem = (menuList: CustomItemType[], keyId: string): CustomItemType | undefined => {
  for (const item of menuList) {
    if (item.key === keyId)
      return item;

    if (item.children) {
      const result = findMenuItem(item.children, keyId);
      if (result)
        return result;
    }
  }
};

// 处理点击菜单项函数，只有点击叶子节点才会触发
const handleMenuClick = (clickEvent: any) => {
  const keyId = clickEvent.key;
  const menuItem = findMenuItem(menuList.value, keyId);
  if (menuItem && menuItem.url) {
    // TODO: 跳转到指定页面，不打开新标签页
    // 如果URL是外部链接则打开新标签页
    if (menuItem.url.startsWith('http'))
      window.open(menuItem.url);
    else
      router.push(menuItem.url)
  }
  toggleDrawer()
}

// 暴露函数
defineExpose({
  toggleDrawer,
});
</script>

<template>
  <!-- 抽屉导航栏 -->
  <a-drawer
    v-model:open="drawerVisible"
    placement="left"
    width="80%"
    closable
  >
    <template #title>
      <!-- 标题默认为 导航菜单 -->
      <span style="font-size: 1.5rem;">{{ title ? title : '导航菜单' }}</span>
    </template>

    <!-- 导航栏内容 -->
    <a-menu mode="inline" style="width: 100%; font-size: 1.3rem; " :items="menuList ? generateMenuList(menuList) : []" @click="handleMenuClick" />
  </a-drawer>
</template>
